<template>
    <div class="p-2">
        <searchrevealing>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="98px">
                <el-form-item label="出库时间" prop="outTimeArray">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.outTimeArray" type="daterange"
                        range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                        style="width: 220px" />
                </el-form-item>
                <el-form-item label="出库部门" prop="coreUserId">
                    <el-select v-model="queryParams.coreUserId" placeholder="请选择出库部门" clearable style="width: 220px"
                        filterable>
                        <el-option v-for="dict in anchorList" :key="dict.coreId" :label="dict.coreName"
                            :value="dict.coreId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="归还状态" prop="putStatus">
                    <el-select v-model="queryParams.putStatus" placeholder="请选择归还状态" clearable style="width: 220px">
                        <el-option v-for="dict in returnStatusList" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="应归还时间" prop="cycleTimeArray">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.cycleTimeArray" type="daterange"
                        range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                        style="width: 220px" />
                </el-form-item>
                <el-form-item label="实际归还时间" prop="realityPutTimeArray">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.realityPutTimeArray" type="daterange"
                        range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                        style="width: 220px" />
                </el-form-item>
                <el-form-item label="商品名称" prop="styleName">
                    <el-input v-model="queryParams.styleName" placeholder="请输入" clearable style="width: 220px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="库存编码" prop="stockCode">
                    <el-input v-model="queryParams.stockCode" placeholder="请输入" clearable style="width: 220px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="69/商品编码" prop="codeContent">
                    <el-input v-model="queryParams.codeContent" placeholder="请输入" clearable style="width: 220px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="出库单状态" prop="cancelStatus">
                    <el-select v-model="queryParams.cancelStatus" placeholder="请选择出库单状态" clearable style="width: 220px">
                        <el-option v-for="dict in cancelStatusList" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="form_button">
                <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
                <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
            </div>
        </searchrevealing>
        <el-card shadow="never">
            <template #header>
                <!-- <el-col :span="1.5">
                    <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
                </el-col> -->
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'产品部出库记录'"
                    @updateColumn="getColmun"></right-toolbar>
            </template>
            <el-table v-loading="loading" :data="selectionRecordList" border @header-dragend="dragEnd">
                <el-table-column label="序号" type="index" width="55" align="center" :fixed="true" />
                <el-table-column v-for="(item, index) in outBoundRecordColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <span v-if="item.prop == 'putStatus'">
                            <span>
                                {{ scope.row.putStatus }}
                                <span :style="{ color: scope.row.overDay == 0 ? '' : '#FC2540' }">
                                    ({{ scope.row.overDay == 0 ? '如期' : '有超期' }})
                                </span>
                            </span>
                        </span>
                        <span v-if="item.prop == 'cancelStatus'">{{ scope.row.cancelStatus == 1 ? '已废弃' : '正常' }}</span>
                        <span v-if="item.prop == 'outNum'">{{ scope.row.cancelStatus == 1 ? '-' : scope.row.outNum }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleInfo(scope.row)" class="color_theme">详情</el-button>
                        <el-button link type="primary" @click="cancellation(scope.row)" class="color_theme"
                            v-if="scope.row.cancelStatus == 0">作废</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" :leftText="statisticsText" />
        </el-card>

        <!--出库记录详情抽屉 -->
        <outBoundRecordDetails @doClose="commoditydetailsClose" :commoditydetailsData="commoditydetailsData"
            :dialogInfoVisible="dialogInfoVisible"></outBoundRecordDetails>
    </div>
</template>



<script setup name="OutBoundRecord" lang="ts">
import { OutBoundQueryParmas, OutBoundVO } from '@/api/group/productOutbound/types'
import { selectOutStockList, cancelStockOut } from '@/api/group/productOutbound'
import outBoundRecordDetails from './components/outBoundRecordDetails.vue'
import { QualityControlForm } from '@/api/group/qualityControl/types';
import { getDeptPage } from '@/api/group/productSelectionPricing'
import { type Action } from 'element-plus'
const { proxy } = getCurrentInstance() as any;
const selectionRecordList = ref<OutBoundVO[]>([]);
const loading = ref(true);
const total = ref(0);
const statisticsText = ref('')
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
const anchorList = ref<{ coreName: string; coreId: string }[]>([])
const columnData = ref()

const dialogInfoVisible = ref(false)
const commoditydetailsData = ref<QualityControlForm>({})

const outBoundRecordColumns = ref()


const returnStatusList = ref<any>([
    { label: '未归还', value: 2 },
    { label: '部分还', value: 3 },
    { label: '已归还', value: 1 }
])

const queryLoading = ref(false)

const queryParams = ref<OutBoundQueryParmas>({
    pageNum: 1,
    pageSize: 10,
    coreUserId: undefined,
    putStatus: undefined,
    styleName: undefined,
    stockCode: undefined,
    outTimeArray: [],
    outStartTime: '',
    outEndTime: '',
    cycleTimeArray: [],
    cycleStartTime: '',
    cycleEndTime: '',
    realityPutTimeArray: [],
    realityPutStartTime: '',
    realityPutEndTime: '',
    codeContent: '',
    cancelStatus: undefined,
})
// 出库单状态
const cancelStatusList = ref([
    { label: '正常', value: '0', },
    { label: '作废', value: '1', }
])
/** 查看商品详情 */
const handleInfo = (row: OutBoundVO) => {
    nextTick(async () => {
        dialogInfoVisible.value = true;
        commoditydetailsData.value = row
    });
};
/** 作废 */
const cancellation = (row: any) => {
    ElMessageBox.confirm('确认作废后,该出库单视为无效,是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        callback: async (action: Action) => {
            if (action == 'confirm') {
                try {
                    await cancelStockOut({ outId: row.outId })
                    proxy?.$modal.msgSuccess('作废成功');
                    await getList()
                } catch {
                }
            }
        },
    })
}
/** 商品详情关闭 */
const commoditydetailsClose = () => {
    dialogInfoVisible.value = false;
}
// 获取选品部门
const getAnchor = async () => {
    const res = await getDeptPage({})
    anchorList.value = res.rows
}
/** 查询列表 */
const getList = async () => {
    try {
        loading.value = true;
        if (queryParams.value.outTimeArray && queryParams.value.outTimeArray.length) {
            queryParams.value.outStartTime = queryParams.value.outTimeArray[0]
            queryParams.value.outEndTime = queryParams.value.outTimeArray[1]
        } else {
            queryParams.value.outStartTime = ''
            queryParams.value.outEndTime = ''
        }
        if (queryParams.value.cycleTimeArray && queryParams.value.cycleTimeArray.length) {
            queryParams.value.cycleStartTime = queryParams.value.cycleTimeArray[0]
            queryParams.value.cycleEndTime = queryParams.value.cycleTimeArray[1]
        } else {
            queryParams.value.cycleStartTime = ''
            queryParams.value.cycleEndTime = ''
        }
        if (queryParams.value.realityPutTimeArray && queryParams.value.realityPutTimeArray.length) {
            queryParams.value.realityPutStartTime = queryParams.value.realityPutTimeArray[0]
            queryParams.value.realityPutEndTime = queryParams.value.realityPutTimeArray[1]
        } else {
            queryParams.value.realityPutStartTime = ''
            queryParams.value.realityPutEndTime = ''
        }
        const res = await selectOutStockList(queryParams.value);
        (selectionRecordList.value as any) = res.rows;
        total.value = res.total;
        statisticsText.value = res.msg || ''
        loading.value = false;
        queryLoading.value = false
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
/** 搜索按钮操作 */
const handleQuery = () => {
    queryLoading.value = true
    queryParams.value.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
/** 导出按钮操作 */
const handleExport = () => {
    proxy?.download("basic/stockProduct/export", {
        ...queryParams.value,
    }, `role_${new Date().getTime()}.xlsx`)
}
/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('产品部出库记录')
    outBoundRecordColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
onMounted(async () => {
    queryParams.value.pageNum = 1;
    await getColmun();
    await getList();
    getAnchor();
})

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: flex-end;
}

.form_button {
    display: flex;
    justify-content: flex-end;
}
</style>